<template>
  <MainLayout>
    <router-view></router-view>
    <div class="logistics-configuration">
    <h2>物流配置</h2>
    
    <!-- 添加物流信息表单 -->
    <el-form :inline="true" class="add-logistics-form">
      <el-form-item label="订单号">
        <el-input v-model="newLogistics.orderId" placeholder="请输入订单号" />
      </el-form-item>
      <el-form-item label="物流公司">
        <el-input v-model="newLogistics.company" placeholder="请输入物流公司" />
      </el-form-item>
      <el-form-item label="物流单号">
        <el-input v-model="newLogistics.trackingNumber" placeholder="请输入物流单号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addLogistics">添加物流信息</el-button>
        <el-button type="danger" :disabled="selectedLogistics.length === 0" @click="batchDelete">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 物流信息列表 -->
    <el-table
      :data="paginatedLogistics"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="orderId" label="订单号" />
      <el-table-column prop="company" label="物流公司" />
      <el-table-column prop="trackingNumber" label="物流单号" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="editLogistics(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteLogistics(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="logistics.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />

    <!-- 编辑物流信息模态框 -->
    <el-dialog v-model="isEditing" title="编辑物流信息" width="30%">
      <el-form :model="editingLogistics">
        <el-form-item label="订单号">
          <el-input v-model="editingLogistics.orderId" />
        </el-form-item>
        <el-form-item label="物流公司">
          <el-input v-model="editingLogistics.company" />
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="editingLogistics.trackingNumber" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
  </MainLayout>
</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: { MainLayout },
  data() {
    return {
      logistics: [
        { id: 1, orderId: '1001', company: '顺丰速运', trackingNumber: 'SF123456789' },
        { id: 2, orderId: '1002', company: '京东物流', trackingNumber: 'JD987654321' }
      ],
      newLogistics: {
        orderId: '',
        company: '',
        trackingNumber: ''
      },
      isEditing: false,
      editingLogistics: {
        id: null,
        orderId: '',
        company: '',
        trackingNumber: ''
      },
      currentPage: 1,
      pageSize: 5,
      selectedLogistics: []
    };
  },
  computed: {
    paginatedLogistics() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.logistics.slice(start, end);
    }
  },
  methods: {
    addLogistics() {
      if (this.newLogistics.orderId && this.newLogistics.company && this.newLogistics.trackingNumber) {
        this.logistics.push({
          id: this.logistics.length + 1,
          ...this.newLogistics
        });
        this.newLogistics = { orderId: '', company: '', trackingNumber: '' };
      }
    },
    editLogistics(logistics) {
      this.isEditing = true;
      this.editingLogistics = { ...logistics };
    },
    saveEdit() {
      const index = this.logistics.findIndex(l => l.id === this.editingLogistics.id);
      if (index !== -1) {
        this.logistics.splice(index, 1, this.editingLogistics);
      }
      this.cancelEdit();
    },
    cancelEdit() {
      this.isEditing = false;
      this.editingLogistics = { id: null, orderId: '', company: '', trackingNumber: '' };
    },
    deleteLogistics(logisticsId) {
      this.logistics = this.logistics.filter(logistics => logistics.id !== logisticsId);
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSelectionChange(selection) {
      this.selectedLogistics = selection;
    },
    batchDelete() {
      this.$confirm('确定要删除选中的物流信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedLogistics.map(logistics => logistics.id);
        this.logistics = this.logistics.filter(logistics => !ids.includes(logistics.id));
        this.selectedLogistics = [];
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  beforeUnmount() {
    console.log('Component is about to be unmounted');
    this.isEditing = false;
    this.editingLogistics = { id: null, orderId: '', company: '', trackingNumber: '' };
    this.selectedLogistics = [];
  },
  unmounted() {
    console.log('Component has been unmounted');
  }
};
</script>

<style scoped>
.logistics-management {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 30px;
  background-color: #fff;
  padding-bottom: 100px;
}

.pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  margin-top: 24px;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.el-dialog {
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  padding: 16px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  padding: 16px;
  border-top: 1px solid #ebeef5;
  background-color: #f5f7fa;
  box-shadow: none;
}

.logistics-management h2 {
  margin-top: 10px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  text-align: left;
}
</style>